<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery初体验</title>
    <style>
        div {
            height: 200px; 
            margin-bottom: 10px;
            background-color: #a43035;
            display: none;
        }
    </style>
    
</head>
<body>
    <input type="button" value="显示" id="btn1">
    <input type="button" value="设置内容" id="btn2">


    <div></div>
    <div></div>
    <div></div>
    <img src="https://img.alicdn.com/tfs/TB18q1heC_I8KJjy0FoXXaFnVXa-1190-365.png_q90.jpg" alt="">
    

    <script src="../jquery-3.2.1.js"></script>
    <script>
        // 入口函数
        // js的入口函数执行比jq快 
        // jq入口函数等待 页面加载完成才执行，但不等待图片加载  js入口函数等待页面加载完成，还有图片也是，才执行

        window.onload=function(){   // js的函数会比jq的函数首选执行
            console.log("我是js的入口函数")
        }

        $(document).ready(function(){

            $("#btn1").click(function(){
                $("div").slideDown(1000);
            })
            $("#btn2").click(function(){
                $("div").text("我是内容");
            })

        });

        $(function(){
            console.log("这是入口函数的第二种写法");
        })
 


    </script>
    
</body>
</html>